<template>
	<view>
		<view class="box">
			<!-- 占用空间 -->
			<view class="vh_top_bg"></view><!-- 占用空间 -->

			<view class="menu_content_box">
				<view class="area_block_1">
					<view class="re pt15 pb15 pl30 pr30">
						<view class="fs36 cor_fff tac">我的</view>
						<view class="log_out_pos" @tap="logout">退出登录</view>

					</view>
					<view class="mt25" style="margin-left: 72rpx;">
						<view class="flex_box aic">
							<view class="mr15 re">
								<image :lazy-load="true" :src="userInfo.icon" class="img13"></image>
							</view>
							<view class="item">
								<view class="fs36 cor_fff">{{userInfo.name}}</view>
								<view class="mt25 fs28 cor_fff">{{userInfo.phone}}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="re pl15 pr15" style="margin-top: -51rpx;z-index: 2;">
					<view class="re" v-if="isIos == false && hideMember == false">
						<view class="member_bg" @tap="toOpenVip">
							<view class="flex_box aic hp100">
								<view class="mr30 re tac">
									<image :lazy-load="true" src="/static/icon_an_crown.png" style="width: 67rpx; height: 58rpx;"
										class="vt"></image>
									<view class="mt10 fs20 cor_f15">会员特权</view>
								</view>
								<view class="item">
									<view class="fs30 fwb cor_5c3">会员权益</view>
									<view class="mt15 fs22 cor_976">买会员 享权益 查阅资料更优惠</view>
								</view>
								<view class="ml15">
									<image :lazy-load="true" v-if="!userInfo.beMember" src="/static/open_member_btn.png"
										style="width: 175rpx;height: 52rpx;" class=""></image>
									<view v-if="userInfo.beMember && userInfo.endDate" style="width: 220rpx;">
										<view class="cor_5c3 fwb"
											style="font-size: 28rpx;text-align: center;line-height: 40rpx;">
											{{userInfo.memName}}
										</view>
										<view class="cor_976"
											style="font-size: 20rpx;text-align: center;line-height: 40rpx;">
											有效期至：{{userInfo.endDate}}</view>
									</view>
								</view>
							</view>
						</view>
						<image :lazy-load="true" src="/static/member_bg.png" class="vt" style="width: 718rpx;height: 106rpx;"></image>
					</view>

					<view class="mt20 area_block_2">
						<view class="df fw tac">
							<view class="mt35 wp25" @tap="toUserInfo">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_1.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">个人资料</view>
							</view>
							<view class="mt35 wp25" @tap="toMyDatabase">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_2.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">我的资料库</view>
							</view>
							<!-- <view class="mt35 wp25" @tap="toOpenVip"  v-if="isIos == false && hideMember == false">
								<view class="re">
									<image src="/static/icon_fun_3.png" class="vt img14"></image> 						</view>
								<view class="mt10 fs26 cor_000">加入会员</view>
							</view> -->
							<view class="mt35 wp25">
								<view class="re" @tap="toRepairLog">
									<image :lazy-load="true" src="/static/icon_fun_4.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">维修记录</view>
							</view>
							<view class="mt35 wp25" @tap="toMystore">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_5.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">配件商铺</view>
							</view>
							<view class="mt35 wp25" @tap="toInspection">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_6.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">现场检测</view>
							</view>
							<view class="mt35 wp25" @tap="toZixun">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_7.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">卖车咨询</view>
							</view>
							<view class="mt35 wp25" @tap="toTuoche">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_8.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">我的拖车</view>
							</view>
							<view class="mt35 wp25" @tap="toRecruitment">
								<view class="re">
									<image :lazy-load="true" src="/static/icon_fun_9.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">我的招聘 </view>
							</view>
							<view class="mt35 wp25" @tap="toAbout">
								<view class="re">
									<image :lazy-load="true" src="/static/about.png" class="vt img14"></image>
								</view>
								<view class="mt10 fs26 cor_000">关于 </view>
							</view>
						</view>
					</view>
				</view>
			</view><!-- menu_content_box -->

			<!-- 底部菜单栏 -->
			<view class="bottom_nav flex_box">
				<view class="item" @tap="toIndex">
					<view>
						<image :lazy-load="true" src="../../static/menu_1_1.png" class="img4 vt"></image>
					</view>
					<view class="mt10">首页</view>
				</view>
				<view class="re item" @tap="toJob">
					<image :lazy-load="true" src="../../static/menu_3_1.png" class="recruit_img_pos"></image>
					<view class="mt50">求职招聘</view>
				</view>
				<view class="item" @tap="toPersonalCenter">
					<view>
						<image :lazy-load="true" src="../../static/menu_2_2.png" class="img4 vt"></image>
					</view>
					<view class="mt10 cor_F23">我的</view>
				</view>
			</view>

		</view><!-- box -->
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getUserInfoApi,
		beHideMemApi
	} from '@/http/api.js';
	import {
		quitLogin
	} from '@/utils/util.js';
	export default {
		data() {
			return {
				userInfo: {},
				userId: uni.getStorageSync('userId'),
				isIos: false,
				hideMember: false
			}
		},
		onShow() {
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/Sign_in/Sign_in'
				})
			}

			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isIos = true;
				this.beHideMem();
			}

			this.getUserInfo();
		},
		onLoad() {
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/Sign_in/Sign_in'
				})
			}
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isIos = true;
				this.beHideMem();
			}

			//this.getUserInfo();
			// try {
			// 	const userInfo = uni.getStorageSync('userInfo');
			// 	if (userInfo) {
			// 		this.userInfo = userInfo;
			// 	} else {
			// 		this.getUserInfo();
			// 	}
			// } catch (e) {
			// 	this.getUserInfo();
			// }

		},
		onBackPress(options) {
		    uni.switchTab({
		    	url: '/pages/personal_center/personal_center'
		    })
		},
		methods: {
			logout() {
				quitLogin();
			},

			getUserInfo() {
				showLoading('加载中');
				let that = this;
				getUserInfoApi({
					userId: this.userId
				}).then(res => {
					that.userInfo = res.data;
					// if (!res.data.beCompleteInfo) {
					// 	uni.navigateTo({
					// 		url: '/pages/personal_information/personal_information'
					// 	})
					// }
					uni.setStorageSync('userInfo', res.data);
					hideLoading();
				}).catch(err => {
					//toast(err.msg);
					hideLoading();
				})
			},

			beHideMem() {
				showLoading('加载中');
				let that = this;
				beHideMemApi({}).then(res => {
					that.hideMember = res.data
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			toIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},

			toPersonalCenter() {
				uni.navigateTo({
					url: '/pages/personal_center/personal_center'
				})
			},

			toRecruitment() {
				uni.navigateTo({
					url: '/pages/my_recruitment/my_recruitment'
				})
			},

			toUserInfo() {
				uni.navigateTo({
					url: '/pages/personal_information/personal_information'
				})
			},

			toMystore() {
				uni.navigateTo({
					url: '/pages/personal_stores/personal_stores'
				})
			},

			toInspection() {
				uni.navigateTo({
					url: '/pages/on_site_inspection/on_site_inspection'
				})
			},

			toZixun() {
				uni.navigateTo({
					url: '/pages/car_sales_consultation/car_sales_consultation'
				})
			},

			toTuoche() {
				uni.navigateTo({
					url: '/pages/my_trailer/my_trailer'
				})
			},

			toOpenVip() {
				uni.navigateTo({
					url: '/pages/my_members/my_members'
				})
			},

			toRepairLog() {
				uni.navigateTo({
					url: '/pages/maintenance_record/maintenance_record'
				})
			},

			toMyDatabase() {
				uni.navigateTo({
					url: '/pages/my_database/my_database'
				})
			},

			toJob() {
				uni.navigateTo({
					url: '/pages/job_recruitment/job_recruitment'
				})
			},

			toAbout() {
				uni.navigateTo({
					url: '/pages/service_agreement/service_agreement'
				})
			},



		}
	}
</script>

<style>
	.vh_top_bg {
		height: 65rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
	}

	.menu_content_box {
		position: relative;
		height: calc(100vh - 163rpx);
		background-color: #f6f6f6;
	}

	.area_block_1 {
		height: 268rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
	}

	.area_block_2 {
		padding: 12rpx 0 50rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.search_img_pos {
		position: absolute;
		top: 19rpx;
		right: 28rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.log_out_pos {
		position: absolute;
		top: 20rpx;
		right: 28rpx;
		height: 32rpx;
		line-height: 32rpx;
		font-size: 28rpx;
		color: #fff;
		z-index: 2;
	}

	.member_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0 30rpx 0 40rpx;
		z-index: 2;
	}
</style>
